<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'dailyPlan.add'">创建</el-button>
    <div class="filter-container">
      <el-date-picker class="filter-item" style="width: 180px" v-model="query.queryString.plan_date" type="date"
        value-format="yyyy-MM-dd" @change="research" placeholder="选择日期">
      </el-date-picker>
      <el-input style="width: 300px" placeholder="产品编号/名称/规格/简码/工序" clearable prefix-icon="el-icon-search"
        class="filter-item" @keyup.enter.native="research" @clear="research" v-model="query.queryString.sku_info">
      </el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <el-dialog title="目标维护" width="75%" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <div>
        <p class="text-yellow" style="padding-left: 120px">产品和线别需要选择且只能选择一种，工序和日期为非必选。</p>
        <div style="margin-bottom: 30px; padding-right: 60px">
          <el-form :model="data" label-width="120px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item class="zFormItem" label="产品">
                  <el-select style="width: 100%" v-model="data.sku_id" placeholder="输入产品关键字检索" filterable remote
                    clearable :disabled="!!data.id || !!data.line_id" :remoteMethod="getSkuOptions">
                    <el-option v-for="(v, k) in skuOptions" :key="k" :label="v" :value="k"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item class="zFormItem" label="线别">
                  <el-select style="width: 100%" v-model="data.line_id" placeholder="请选择" filterable clearable
                    :disabled="!!data.id || !!data.sku_id">
                    <el-option v-for="(v, k) in lineOptions" :key="k" :label="v" :value="k"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item class="zFormItem" label="工序">
                  <el-select style="width: 100%" v-model="data.group_id" placeholder="请选择" filterable clearable
                    :disabled="!!data.id">
                    <el-option v-for="(v, k) in groupOptions" :key="k" :label="v" :value="k"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item class="zFormItem" label="生效日期">
                  <el-date-picker style="width: 100%" v-model="data.plan_date" type="date" :disabled="!!data.id"
                    value-format="yyyy-MM-dd" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item class="zFormItem" label="班制" v-show="!data.id">
              <el-select style="width: 100%" v-model="shift_ids" placeholder="请选择班制" multiple>
                <el-option v-for="(v, k) in shiftOptions" :key="k" :label="v.name" :value="k"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="预设数据" v-show="!data.id">
              <el-input-number style="width: 130px" placeholder="总投入" :controls="false" v-model="defaultData.input">
              </el-input-number>
              <el-input-number style="width: 130px" placeholder="总产出" :controls="false" v-model="defaultData.output">
              </el-input-number>
              <el-input-number style="width: 130px" placeholder="良率" :controls="false" v-model="defaultData.yield_rate">
              </el-input-number>
              <el-input-number style="width: 130px" placeholder="直通率" :controls="false" v-model="defaultData.fpy">
              </el-input-number>
              <el-input-number style="width: 130px" placeholder="待修" :controls="false" v-model="defaultData.wfr">
              </el-input-number>
              <el-button type="warning" @click.native="genData" class="pull-right"> 生成 </el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="data.detail" style="width: 100%">
          <el-table-column prop="shift" label="班制" width="120">
            <template slot-scope="{ row }"><span
                v-if="shiftOptions[row.shift_id]">{{ shiftOptions[row.shift_id].name }}</span></template>
          </el-table-column>
          <el-table-column prop="shift_item" label="课时">
            <template slot-scope="{ row }">
              第{{ row.shift_item }}节课&nbsp;&nbsp;{{ row.start_time }}&nbsp;~&nbsp;{{ row.end_time }}
            </template>
          </el-table-column>
          <el-table-column prop="input_target" label="投入目标" width="100">
            <template slot-scope="{ row }">
              <el-input-number size="mini" style="width: 70px" :controls="false" v-model="row.input_target">
              </el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="output_target" label="产出目标" width="100">
            <template slot-scope="{ row }">
              <el-input-number size="mini" style="width: 70px" :controls="false" v-model="row.output_target">
              </el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="yield_rate_target" label="良率目标" width="100">
            <template slot-scope="{ row }">
              <el-input-number size="mini" style="width: 70px" :controls="false" v-model="row.yield_rate_target">
              </el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="fpy_target" label="直通率目标" width="100">
            <template slot-scope="{ row }">
              <el-input-number size="mini" style="width: 70px" :controls="false" v-model="row.fpy_target">
              </el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="wfr_target" label="待修目标" width="100">
            <template slot-scope="{ row }">
              <el-input-number size="mini" style="width: 70px" :controls="false" v-model="row.wfr_target">
              </el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="submit" :loading="submitLoading"> 保存 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { arrayToObject } from '@/utils'
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'dailyPlan',
  data: function () {
    return {
      api: this.$api.dailyplan,
      apiEdit: this.$api.dailyplan + 'modify',
      apiCreate: this.$api.dailyplan + 'modify',
      name: '产出计划',
      columns: [
        { title: '线别', key: 'line_name', width: 140 },
        { title: '产品品号', key: 'sku_code', width: 120 },
        { title: '品名', key: 'sku_name' },
        // { title: '规格', key: 'sku_spec', width: 140 },
        { title: '品号简码', key: 'brief_code', width: 120 },
        { title: '日期', key: 'plan_date', width: 120 },
        { title: '工序', key: 'group_name', width: 140 },
        { title: '计划数量', key: 'plan_qty', width: 70 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [],
      query: {
        queryString: {
          sku_info: '',
          plan_date: '',
        },
        page: 1,
        size: 10,
      },
      initData: { detail: [] },
      shiftOptions: [],
      shift_ids: [],
      skuOptions: {},
      groupOptions: {},
      lineOptions: {},
      defaultData: {},
    }
  },
  methods: {
    init() {
      this.$request(this.$api.shift + 'getitembyid', {})
        .then((r) => {
          let tmp = {}
          _.forEach(r, (i) => {
            if (!tmp[i.shift_id]) {
              tmp[i.shift_id] = { id: i.shift_id, name: i.shift_name, items: [] }
            }
            tmp[i.shift_id].items.push(i)
          })
          this.shiftOptions = tmp
        })
        .catch(() => {})
      this.$request(this.$api.group + 'getlist', { mes_flag: 'Y' }).then((r) => {
        this.groupOptions = arrayToObject(r, r && r[0].id == undefined ? 'group_code' : 'id', 'group_name')
      })
      this.$request(this.$api.line + 'getlistbypage', { page: 1, size: 999 }).then((r) => {
        this.lineOptions = arrayToObject(r.list, 'id', 'line_name')
      })
    },
    genData: function () {
      this.data.detail = []
      let tmp = []
      _.forEach(this.shiftOptions, (i) => {
        if (_.indexOf(this.shift_ids, i.id) !== -1) {
          tmp = _.concat(tmp, i.items)
        }
      })
      _.forEach(tmp, (i) => {
        this.data.detail.push({
          shift_id: i.shift_id,
          shift_item: i.shift_item,
          start_time: i.start_time,
          end_time: i.end_time,
          shift_item_id: i.id,
          input_target: _.ceil(this.defaultData.input / tmp.length),
          output_target: _.ceil(this.defaultData.output / tmp.length),
          yield_rate_target: this.defaultData.yield_rate,
          fpy_target: this.defaultData.fpy,
          wfr_target: this.defaultData.wfr,
        })
      })
    },
    editItem(row) {
      this.pageLoading = true
      this.data = { ...row }
      this.singleOption(this.data.sku_id)
      this.data.detail = []
      this.$request(this.api + 'getbyid', {
        id: row.id,
      })
        .then((r) => {
          console.info(r)
          this.pageLoading = false
          this.data.detail = r
          this.editFormVisible = true
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
    getSkuOptions(query) {
      if (query) {
        this.$request(this.$api.sku + 'getlist', {
          queryString: query,
          size: 10,
          page: 1,
        })
          .then((r) => {
            this.skuOptions = arrayToObject(r.list, 'id', ['key_part_no', 'key_part_name'])
          })
          .catch(() => {})
      } else {
        this.skuOptions = {}
      }
    },
    singleOption(id) {
      if (id) {
        this.$request(this.$api.sku + 'getbyid', {
          id,
        })
          .then((r) => {
            this.skuOptions = arrayToObject(r, 'id', ['key_part_no', 'key_part_name'])
          })
          .catch(() => {})
      } else {
        this.skuOptions = {}
      }
    },
  },
  created: function () {
    this.getList()
    this.init()
  },
}
</script>
<style scoped>
</style>
